<template>
	<view>
		<view>
			<view class="dormitoryNav">
				<view style="font-weight: 800;">全部信息
					<view class="leaveLine"></view>
				</view>
			</view>
			<view v-for="(item,index) in maintenanceList" :key="item.id" @click="newMaintenanceFun(item)">
				<view class="mainContentWrap">
					<view style="margin-top:30rpx;color:#0000FF;font-weight: 800;font-size: 30rpx;">
						<span class="iconfont icon-shouye-shouye"
							style="font-size:32rpx;margin-right:20rpx;color:#0000FF"></span>
						{{item.dormitoryNo}}
					</view>
					<view
						style="margin-top:40rpx;color:#8F8F94;font-size:24rpx;width:150rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
						({{item.deviceName}})</view>
					<view style="margin-top:20rpx;color:#ff0088;font-size: 28rpx;">
						{{item.repairDate}}
						<view style="margin-top: 20rpx; color:#8F8F94;font-size: 24rpx;text-align: right;">正在处理中></view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in clasList" :key="item.id" @click="newMaintenanceFun(item)">
				<view class="mainContentWrap">
					<view style="margin-top:30rpx;color:#0000FF;font-weight: 800;font-size: 30rpx;width:260rpx;">
						<span class="iconfont icon-shouye-shouye"
							style="font-size:32rpx;margin-right:20rpx;color:#0000FF"></span>
						{{item.className}}
					</view>
					<view
						style="margin-top:40rpx;color:#8F8F94;font-size:24rpx;width:100rpx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
						({{item.deviceName}})</view>
					<view style="margin-top:20rpx;color:#ff0088;font-size: 28rpx;">
						{{item.repairDate}}
						<view style="margin-top: 20rpx; color:#8F8F94;font-size: 24rpx;text-align: right;">正在处理中></view>
					</view>
				</view>
			</view>
			<view v-if="maintenanceList.length==0&&clasList.length==0" class="repDevice">暂无报修记录</view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom>		 -->
	</view>
</template>

<script>
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import headTitle from '../component/btnHeadeCom.vue'
	export default {
		name: 'leveRegistration',
		data() {
			return {
				isShowTitle: true,
				isShowList: false,
				userName: "维修",
				topName: '正在处理中',
				titleHead: '正在处理中',
				bottomName: 'after',
				maintenanceList: [{
					class: '202',
					address: '畔湖苑',
					time: '2022-03-5',
				}, {
					class: '203',
					address: '畔湖苑',
					time: '2022-03-6',
				}, ],
				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "首页",
						path: '/pages/maintenance/maintenanceIndex'
					},

					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "退出",
						path: '/pages/index/login'
					},
				],
				clasList: [],
			}
		},
		components: {
			topCom,
			bottomCom,
			headTitle,
		},
		mounted() {
			this.getAppProcessRepList()
			this.getAppProcessClassRepList()
		},
		methods: {
			newMaintenanceFun(item) {
				if (item.className) {
					uni.navigateTo({
						url: `/pages/maintenance/maintenanceIngDetail?repairId=${item.id}&className=${item.className}&classId=${item.classId}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/maintenance/maintenanceIngDetail?repairId=${item.id}&dormitoryNo=${item.dormitoryNo}&bdormitoryId=${item.bdormitoryId}`
					})
				}
			},
			getAppProcessRepList() {
				this.$api.maintenance.getAppProcessRepList().then(res => {
					this.maintenanceList = res.data
					this.maintenanceList.forEach((item) => {
						item.dormitoryNo = `${item.buildingNo}${item.dormitoryNo}`
					})
				})
			},
			getAppProcessClassRepList() {
				this.$api.maintenance.getAppProcessClassRepList().then(res => {
					this.clasList = res.data
					this.clasList.forEach((item) => {
						item.className = `班级${item.className}`
					})
				})
			},
			attBtnSkip(item, arr) {
				for (let i in arr) {
					if (item.type != arr[i].type) {
						arr[i].isShow = false
					}
				}
				item.isShow = true
			},
			checkFun(item) {

			},
			attendanceTtileFun() {
				this.isShowTitle = !this.isShowTitle
			}
		}
	}
</script>

<style>
	.repDevice {
		text-align: center;
		font-size: 32rpx;
		color: #808080;
		margin-top: 30rpx;
	}

	.mainContentWrap {
		border: #8F8F94 solid 0rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin-top: 30rpx;
		width: 700rpx;
		margin-left: 10rpx;
		box-shadow: 0upx 0upx 10upx 0upx #8F8F94;
		display: flex;
		justify-content: space-around;
		align-content: space-around;

	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.attBtn1 {
		margin-right: 4rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: -20rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10upx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;

	}

	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 20upx;
		color: white;
		background-color: #007AFF;
	}

	.attBtnFont {
		border: solid #808080 0rpx !important;
		;
		font-size: 20upx;
	}

	.attBtnFont1 {
		border: solid #808080 0rpx !important;
		;
		font-size: 20upx;
		padding-left: 18rpx !important;
		padding-right: 18rpx !important;
	}

	.attLine {
		width: 700upx;
		height: 3upx;
		background: rgba(239, 237, 236, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: 10upx;
		left: 0upx;
	}

	.attBtn {
		width: 60%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: -20upx;

	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		width: 190upx;
		height: 60upx;
		color: white;
		font-size: 26upx;
		font-weight: 0;
	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}

	.leaveMgm {
		color: #808080;
		font-size: 28upx;
	}

	.leaveCheck {
		margin-left: 60upx;
		margin-bottom: 30upx;
	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>